<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    .span1 {
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 指令，通过值的变化操作dom -->
    <p v-text="text1"></p>
    <p v-html="html1"></p>
    <!-- 如果登录了就显示用户名，否则显示密码 -->
    <!-- <p v-if="isLogin">{{name}}</p>
    <button v-else v-on:click="login">请登录</button> -->
    <!-- 频繁切换用v-show，不频繁切换用v-if -->
    <p v-show="isLogin">{{name}}</p>
    <button v-show="!isLogin">请登录</button>
    <hr>
    <ul>
      <li v-for="(item, index) in kongFu">
        {{index+1}}. {{item.name}}(学费：{{item.price}})
      </li>
    </ul>
    <hr>
    <p>九九乘法表</p>
    <!-- p是每一行 -->
    <p v-for="row in 9">
      <!-- span是每一列 -->
      <span class="span1" v-for="num in row">{{row}}*{{num}}={{row*num}}</span>
    </p>
    <hr>
    <table>
      <thead>
        <tr>
          <th>座次表</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(seat, num) in seatList">
          <td>第{{num + 1}}排</td>
          <td v-for="(item, index) in seatList[num]">{{item}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        text1: 'hello vue!',
        html1: '<b>hello vue!</b>',
        name: 'Tom',
        isLogin: false,
        kongFu: [
          {name: '耗子尾汁', price: 500},
          {name: '偷袭', price: 1000},
          {name: '大意了没有闪', price: 1500},
          {name: '有备而来', price: 2000},
          {name: '接化发', price: 5000},
        ],
        // 座次表
        seatList: [
          ['提莫','亚索','盲僧','瑟提'],
          ['程咬金','百里','安其拉','鲁班'],
          ['马保国','窃格瓦拉','奥利给']
        ]
      },
      // 放函数的地方
      methods: {
        login() {
          // 双向绑定：数据和视图之间建立了连接，当数据变化时视图会自己更新，当视图变化时数据也会更新。
          this.isLogin = true;
        }
      },
    })
  </script>
</body>
</html>